<template>
  <div>
    <!-- 卡片 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style=" margin-bottom:20px ;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表格 -->
    <el-card class="box-card">
      <div class="Eddbox">
        <el-button type="primary" @click="CateParList">添加分类</el-button>
      </div>
      <!-- 表格 -->
      <zk-table
      style="margin:20px 0"
        :columns="columns"
        :data="dataList"
        :expand-type="false"
        :show-index="true"
        :border="true"
        :selection-type="false"
      >
      <!-- 是否有效插槽 -->
        <template slot="cat_deleted" slot-scope="scope">
            <i v-if="scope.row.cat_delete=false"  style="color:red;" class="el-icon-error"></i>
            <i v-else class="el-icon-success"  style="color:#90ee90;"></i>  
        </template>
        <!-- 排序插槽 -->
        <template slot="cat_level" slot-scope='scope'>
          <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
      </template>

        <template slot="active" slot-scope='scope'>
            <el-button size="mini" type="primary" @click="Addfls(scope.row)" >
              <i class="el-icon-edit"></i>编辑
            </el-button>
            <el-button size="mini" type="danger" @click="delCatago(scope.row)">
              <i class="el-icon-delete"></i>删除
            </el-button>
      </template>
      </zk-table>
      <!-- 分页 -->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>

    <!-- 添加分类弹出层 -->
<el-dialog title="添加分类" :visible.sync="dialogFormVisible">
  <el-form :model="formCate" :rules='rules' ref="formCate" style="text-align: left">
    <el-form-item label="分类名称" :label-width="formLabelWidth" prop="name">
      <el-input v-model="formCate.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="父级分类" :label-width="formLabelWidth">
      <!-- 链级下拉列表 -->
    <el-cascader
    v-model="value"
    :options="catelist"
    clearable 
    :props="options"
    expandTrigger= 'hover'
    @change="handleChange"
    style="width:100%;">
    </el-cascader>

    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmCate">确 定</el-button>
  </div>
</el-dialog>

<!-- 编辑分类弹出层 -->
      <el-dialog title="编辑分类" :visible.sync="dialogFormVisibleAdd">
      <el-form :model=" formAddCatStaticMany" :rules='rulesCatname' ref="formAddCatStaticMany">
        <el-form-item label="分类名称：" :label-width="formLabelWidth" prop="cat_name">
          <el-input v-model="formAddCatStaticMany.cat_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="CatAddStaticManys">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { categoriesList_api,catePostList_api,delCategos_api,AddCategos_api} from "@/api/index.js";
export default {
  data() {
    return {
      // 下拉列表
      value:'',
      catelist:[],
      options:{
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        checkStrictly:true

      },
      // 编辑分类 
      formAddCatStaticMany:{
        cat_name:'',
        id:''
      },
    // 编辑弹出层表单验证
      rulesCatname: {
        cat_name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
      formCateAdd:{
        cat_pid:'',
        cat_name:'',
        cat_level:''
      },
      // 弹出层
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisibleAdd:false,
          formCate: {
            name:''
        },
        // 弹出层表单验证
       rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]
          },
      params: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      dataList: [],
      total:1,
      currentPage4: 4,
      // 数据
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",

          type: "template",
          template: "cat_deleted",
        },
        {
          label: "排序",
          type: "template",
          template: "cat_level",
        },
        {
          label: "操作",
          type: "template",
          template: "active",
        },
      ],
    };
  },
  created() {
    this.getcategoriesList();
  },
  methods: {
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.params.pagesize = val
        this.getcategoriesList();
      },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.params.pagenum = val
        this.getcategoriesList();
      },
    async getcategoriesList() {
      const { data: res } = await categoriesList_api(this.params);
    //   console.log(res, 7777);
      this.dataList = res.data.result;
      this.total = res.data.total
    },

    async CateParList () {
      
     this.dialogFormVisible = true
      const {data:res} = await categoriesList_api({type:2})
      // console.log(res);
      this.catelist = res.data
    
    },
    // 链级下拉列表值改变事件
    handleChange(){

    },
    // 删除分类
   async delCatago(row){
     const result =await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        if(result=="confirm"){
          // 发送请求删除
       const {data:res} = await delCategos_api(row.cat_id)
          this.$message({
            type: 'success',
            message: res.meta.msg
          });

          // 刷新列表
           this.getcategoriesList();
        } 
    },
    // 编辑分类
    Addfls(row){
      this.dialogFormVisibleAdd=true
      // console.log(row,1999);
      this.formAddCatStaticMany.cat_name=row.cat_name
      this.formAddCatStaticMany.id = row.cat_id
      
    },
    // 编辑分类确定按钮
    CatAddStaticManys(){
        this.$refs.formAddCatStaticMany.validate(async valid=>{
            if(!valid) return
           this.dialogFormVisibleAdd=false
             const {data:res} = await AddCategos_api(this.formAddCatStaticMany)
           
            this.$message({
            type: 'success',
            message: res.meta.msg
          });
            // 刷新列表
           this.getcategoriesList();
        })
        
    },
    // 添加分类确定按钮
   confirmCate(){
      // 二次验证
      this.$refs.formCate.validate(async valid=>{
        if(!valid) return
        this.dialogFormVisible = false
          // 发送请求
          // 获取参数cat_id
          if(this.value.length>0){
            this.formCateAdd.cat_pid = this.value[this.value.length-1]
          }else{
            this.formCateAdd.cat_pid = 0
          }
          // 获取参数
           this.formCateAdd.cat_level=this.value.length
           this.formCateAdd.cat_name = this.formCate.name
          // //  发送请求
          const {data:res} = await catePostList_api(this.formCateAdd)
          // console.log(res,888999);
              this.$message({
              message: res.meta.msg,
              type: "warning",
            });
             this.getcategoriesList();
              // 清空表单
         this.$refs.formCate.resetFields();
         this.value = []
      })
     

    }
  },
};
</script>

<style lang="less">
.Eddbox {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
</style>